function createElement(tag, classNames) {
	let element = document.createElement(tag);
	element.setAttribute("class", classNames);
	return element;
}

class Html {
	constructor(arg) {

	}

	getElement() {
		return this.element;
	}
}

/**
 * dom创建工具，未完成
 * @param {Object} tag
 * @param {Object} {class:"node-title"}
 * @param {Object} c nullable
 */
function h(tag, attributes, c) {
	let e = document.createElement(tag);
	if (typeof(attributes) == 'object') {
		for (let key in attributes) {
			if (key) {
				e.setAttribute(key, attributes[key])
			}
		}
	} else if (typeof(attributes) == 'string') {
		e.setAttribute("class", attributes);
	}
	if (c) {
		if (typeof(c) == 'string') {
			e.innerHTML = c;
		} else {
			if (c.length) {
				for (var i = 0; i < c.length; i++) {
					e.appendChild(c[i]);
				}
			} else {
				e.appendChild(c);
			}
		}
	}
	return e;
}

function span(attributes, child) {
	return h('span', attributes, child);
}

function label(attributes, child) {
	return h('label', attributes, child);
}

function div(attributes, child) {
	return h('div', attributes, child);
}

function img(attributes, child) {
	return h('img', attributes, child);
}

function input(type, attributes, child) {
	let finalAttributes = {};
	if (attributes) {
		if (typeof(attributes) == 'object') {
			finalAttributes = attributes;
		} else {
			finalAttributes['class'] = attributes;
		}
	}
	finalAttributes.type = type;

	return h('input', finalAttributes, child);
}


class NodeTitle {
	constructor(txt) {
		this.flowNode = null;
		this.element = document.createElement("div");
		this.element.setAttribute("class", "node-title");
		this.elementLabel = createElement("div", "label");
		this.elementLabel.innerHTML = txt;
		this.elementCloseBtn = createElement("div", "close-btn");
		this.elementCloseBtn.innerHTML = "×";
		this.element.appendChild(this.elementLabel);
		this.element.appendChild(this.elementCloseBtn);
		this.elementCloseBtn.addEventListener("click", (e) => {
			this.flowNode.remove();
			return false;
		})
	}

	setFlowNode(flowNode) {
		this.flowNode = flowNode;
	}

	showCloseBtn() {
		this.elementCloseBtn.style.display = "block";
	}
	hideCloseBtn() {
		this.elementCloseBtn.style.display = "none";
	}

	getElement() {
		return this.element;
	}
}

class NodeContent {
	constructor(txt) {
		this.element = document.createElement("div");
		this.element.setAttribute("class", "node-content");
		this.element.innerHTML = txt;
		//监听点击事件
		this.element.addEventListener("click", (e) => {
			document.getElementById("approval-attribute-panel").style.display = "block"

		}, true)
	}

	getElement() {
		return this.element;
	}

	appendChild(obj) {
		this.element.appendChild(ele.getElement());
	}
}

class NodeLine {
	constructor() {
		this.element = document.createElement("div");
		this.element.setAttribute("class", "bottom-v-line");
	}

	getElement() {
		return this.element;
	}
}

class NodeArrow {
	constructor() {
		this.element = document.createElement("div");
		this.element.setAttribute("class", "bottom-v-arrow");
	}

	getElement() {
		return this.element;
	}
}

class NodeAddBtn {
	constructor(flowNode) {
		this.flowNode = flowNode;
		this.addNodeTypeBtns = null;
		this.element = document.createElement("div");
		this.element.setAttribute("class", "add-node-btn");
		let addBtn = document.createElement("div");
		addBtn.setAttribute("class", "add-btn");
		addBtn.innerHTML = "+";
		addBtn.addEventListener('click', (e) => {
			this.addNodeTypeBtns.show();
		})
		this.element.appendChild(addBtn);

		//挂载添加按钮组
		this.addNodeTypeBtns = new AddNodeTypeBtns(this.flowNode);
		this.appendChild(this.addNodeTypeBtns)

	}

	appendChild(obj) {
		this.element.appendChild(obj.getElement());
	}

	setFlowNode(flowNode) {
		this.flowNode = flowNode;
	}

	getElement() {
		return this.element;
	}
}

class NodeContainer {
	constructor(name, type) {
		this.element = document.createElement("div");
		this.element.setAttribute("class", "flow-node-container ");
		this.titleElement = null;
		this.contentElement = null;
		//初始化鼠标悬浮事件
		this.initEventListeners();
	}

	initEventListeners() {
		//初始化鼠标移入事件
		this.element.addEventListener("mouseenter", (e) => {
			this.titleElement.showCloseBtn();
		}, true)

		//初始化鼠标移出事件
		this.element.addEventListener("mouseout", (e) => {
			this.titleElement.hideCloseBtn();
		}, true)
	}

	appendChild(ele) {
		this.element.appendChild(ele.getElement());
	}

	setTitle(titleElement) {
		this.titleElement = titleElement;
		this.element.appendChild(titleElement.getElement());
	}

	setContent(contentElement) {
		this.contentElement = contentElement;
		this.element.appendChild(contentElement.getElement());
	}

	getElement() {
		return this.element;
	}
}



class FlowNode {
	constructor(name, type) {
		this.flowType = type;
		this.name = name;
		this.element = document.createElement("div");
		this.flowNodeContainer = null;
		this.element.setAttribute("class", "flow-node " + type);
		this._createNodeContainer();
	}

	_createNodeContainer() {
		let flowNodeContainer = new NodeContainer(this.name, this.flowType);
		let nodeTitle = new NodeTitle(this.name);
		let nodeContent = new NodeContent("提交人：李飞飞");
		flowNodeContainer.setTitle(nodeTitle);
		nodeTitle.setFlowNode(this);
		flowNodeContainer.setContent(nodeContent);

		this.appendChild(flowNodeContainer);

		if (this.flowType != "end") {
			let nodeLine = new NodeLine();
			let nodeAddBtn = new NodeAddBtn(this);
			let nodeArrow = new NodeArrow();
			this.appendChild(nodeLine);
			this.appendChild(nodeAddBtn);
			this.appendChild(nodeArrow);
			nodeAddBtn.setFlowNode(this);
		}
		this.element.appendChild(flowNodeContainer.getElement());
		this.flowNodeContainer = flowNodeContainer;
	}

	_createConditionNode() {
		let flowNodes = new flowNodes();

	}

	addNext(name, type) {
		let current = this.element;
		let parent = current.parentNode;
		let nextNode = current.nextElementSibling;
		console.log("type", type)
		let newFlowNode = null;
		if (type == "condition") {
			newFlowNode = new FlowNodeRoute();
		} else {
			newFlowNode = new FlowNode(name, type)
		}
		let newElement = newFlowNode.getElement();
		parent.insertBefore(newElement, nextNode);
	}

	getName() {
		return this.name;
	}

	appendChild(ele) {
		this.element.appendChild(ele.getElement());
	}

	remove() {
		this.element.parentNode.removeChild(this.element);
	}

	getElement() {
		return this.element;
	}
}

class FlowNodes {
	constructor(route) {
		this.element = document.createElement("div");
		this.element.setAttribute("class", "flow-node branch");
		//如果是条件分支节点的流程节点则需要加一个顶部引导线
		if (route == "route") {
			let topLineMask = createElement("div", "top-line-mask");
			let topVline = createElement("div", "top-v-line");
			let bottomVarrow = createElement("div", "bottom-v-arrow");
			this.element.appendChild(topLineMask)
			this.element.appendChild(topVline);
			this.element.appendChild(bottomVarrow);
		}
		let nodes = document.createElement("div");
		nodes.setAttribute("class", "nodes");
		this.nodes = nodes;
		this.element.appendChild(nodes);
		//如果是条件分支节点的流程节点则需要加一个底部补充线
		if (route == "route") {
			let bottomVline = createElement("div", "bottom-v-line");
			let bottomLineMask = createElement("div", "bottom-line-mask");

			this.element.appendChild(bottomVline);
			this.element.appendChild(bottomLineMask);
		}
	}

	addFlowNode(flowNode) {
		this.nodes.appendChild(flowNode.getElement());
	}

	getElement() {
		return this.element;
	}
}

class Branchs {
	constructor(arg) {
		this.element = createElement("div", "branchs");
		this.initNodeRoute();
	}

	initNodeRoute() {
		this.appendChild(this.createFlowNodes());
		this.appendChild(this.createFlowNodes());
	}

	createFlowNodes() {
		var rootNode = new FlowNodes("route");
		var conditionFlowNode = new FlowNode("条件分支", "condition");
		rootNode.addFlowNode(conditionFlowNode);
		var approvalFlowNode = new FlowNode("审批节点", "approval");
		rootNode.addFlowNode(approvalFlowNode)
		return rootNode;
	}

	addNodeRoute() {
		return this.appendChild(this.createFlowNodes())
	}

	appendChild(ele) {
		this.element.appendChild(ele.getElement());
	}

	getElement() {
		return this.element;
	}
}

class FlowNodeRoute extends FlowNode {
	constructor() {
		super("条件分支", "branch");
		this.element = createElement("div", "flow-node route");
		this.branchsElement = null;
		//顶部线
		let topHline = createElement("div", "top-h-line");
		this.element.appendChild(topHline);
		//创建添加按钮
		this._createAddBtn();
		//创建分支容器
		this.branchs = new Branchs();
		this.element.appendChild(this.branchs.getElement());
		//创建尾部连接器和新增按钮
		this.element.appendChild(createElement("div", "bottom-h-line"));
		this.element.appendChild(createElement("div", "bottom-v-line"));

		let nodeAddBtn = new NodeAddBtn(this);
		this.appendChild(nodeAddBtn);
		this.element.appendChild(createElement("div", "bottom-v-arrow"));
	}

	appendChild(ele) {
		this.element.appendChild(ele.getElement());
	}

	_createAddBtn() {
		let addBtn = createElement("div", "add-branch");
		let addBranchInner = createElement("div", "add-branch-inner");
		let span = document.createElement("span");
		span.innerText = "＋ 添加条件分支";
		addBranchInner.appendChild(span)
		addBtn.addEventListener("click", (e) => {
			this.branchs.addNodeRoute()
		})
		addBtn.appendChild(addBranchInner);
		this.element.appendChild(addBtn)
	}

	getElement() {
		return this.element;
	}
}

class ApprovalNode extends FlowNode {
	constructor(name) {
		super(name)
	}
}

class AddNodeTypeBtns {
	constructor(flowNode) {
		this.flowNode = flowNode;
		this.addNodeTypesElements = document.createElement("div");
		this.addNodeTypesElements.setAttribute("class", "add-node-types");
		this.addNodeTypesElements.appendChild(this._createBtn("审批", "imgs/icon/审批人.png", (e) => {
			this.flowNode.addNext('审批', 'approval');
			this.hide();
		}))
		this.addNodeTypesElements.appendChild(this._createBtn("抄送人", "imgs/icon/抄送人.png", (e) => {
			this.flowNode.addNext('抄送', 'cc');
			this.hide();
		}))
		this.addNodeTypesElements.appendChild(this._createBtn("办理人", "imgs/icon/办理人.png", (e) => {
			this.flowNode.addNext('办理', 'handle');
			this.hide();
		}))
		this.addNodeTypesElements.appendChild(this._createBtn("条件分支", "imgs/icon/条件分支.png", (e) => {
			this.flowNode.addNext('条件分支', 'condition');
			this.hide();
		}))
	}

	getElement() {
		return this.addNodeTypesElements;
	}

	show() {
		this.addNodeTypesElements.style.display = "block";
	}

	hide() {
		this.addNodeTypesElements.style.display = "none";
	}

	_createBtn(typeName, iconSrc, clickEventHandle) {
		let nodeTypeWrap = this._createElement("div", "node-type-wrap");
		if (clickEventHandle) {
			nodeTypeWrap.addEventListener('click', clickEventHandle);
		}
		let nodeTypeIcon = this._createElement("div", "node-type-icon");
		let img = this._createElement("img");
		img.setAttribute("src", iconSrc);
		let nodeTypeName = this._createElement("div", "node-type-name");
		nodeTypeName.innerHTML = typeName;
		nodeTypeIcon.appendChild(img);

		let nodeType = this._createElement("div", "node-type");
		nodeType.appendChild(nodeTypeIcon);
		nodeType.appendChild(nodeTypeName);
		nodeTypeWrap.appendChild(nodeType);
		return nodeTypeWrap;
	}

	_createElement(tagName, className) {
		let tag = document.createElement(tagName);
		tag.setAttribute("class", className);
		return tag;
	}
}


// class ApprovalNameEditor {
// 	constructor(arg) {
// 		this.element = createElement("div", "approval-editor-name-wrapper");
// 		this.approvalEditorName = createElement("div", "approval-editor-name");
// 		this.element.appendChild(this.approvalEditorName);
// 	}

// 	getElement() {
// 		return this.element;
// 	}
// }
// class ApprovalAttributes extends Html{
// 	constructor(approvalAttrubutesData) {

// 		let approvalNameEditor = new ApprovalNameEditor();
// 		let approvalEditorForm = new ApprovalEditorForm();
// 		let approvalEditorFooter = new ApprovalEditorFooter()
// 		this.element = h("div", "approval-attributes", [
// 			h("div", "mask"),
// 			h("div", "approval-editor-drawer", 
// 				h("div", "approval-editor-content", [
// 					approvalNameEditor.getElement(),
// 					approvalEditorForm.getElement(),
// 					approvalEditorFooter.getElement()
// 				])
// 			)
// 		])



// 	}
// }

// class ApprovalEditorForm extends Html{
// 	constructor(arg) {
// 		this.element = h("div","approval-editor-form");
// 	}
// }

// class ApprovalType extends Html{
// 	constructor(arg) {
// 	    super(arg);
// 		this.element = h("div","item-wrapper",h("div","approval-type-wrapper",[

// 		]))
// 	}
// }

// class ApprovalEditorFooter extends Html{
// 	constructor(arg) {
// 		super(arg);
// 		this.saveBtn = h("button",{class:"fz-btn primary",type:"button"},"保存");
// 		this.cancelBtn = h("button",{class:"fz-btn primary",type:"button"},"取消");
// 		this.element = h("div","approval-editor-footer-wrapper",[this.cancelBtn,this.saveBtn])
// 	}
// }


// 初始化审批属性设置界面按钮：审批人、表单权限、操作权限
var approvalFunctionBtns = document.getElementsByClassName("approval-function-btn");
for (var i = 0; i < approvalFunctionBtns.length; i++) {
	let approvalFunctionBtn = approvalFunctionBtns[i]
	approvalFunctionBtn.addEventListener("click", (e) => {
		let bs = document.getElementsByClassName("approval-function-btn");
		for (var i = 0; i < bs.length; i++) {
			bs[i].setAttribute("class", bs[i].getAttribute("class").replace("active", ""))
		}
		e.target.setAttribute("class", e.target.getAttribute("class") + " active");
		//联动下方那啥
		let btnId = e.target.getAttribute("id");
		batchHideForClass("setting-panel");
		switch (btnId) {
			case "approver":
				showById("approver-setting-panel")
				break;
			case "formPrmissions":
				showById("form-authority-setting-panel")
				break;
			case "operationPermissions":
				showById("operation-authority-panel")
				break;
		}
	})
}
// function showById(id){
// 	document.getElementById(id).style.display="block";
// }
// function batchHideForClass(className){
// 	let bs = document.getElementsByClassName(className);
// 	for (var i = 0; i < bs.length; i++) {
// 		bs[i].style.display="none";
// 	}
// }
class Element {
	constructor(elements) {
		this.elements = elements;
	}

	getElement() {

	}

	addClassName(className) {
		for (var i = 0; i < this.elements.length; i++) {

		}
	}
}

/**
 * 属性面板对象
 * 1.初始化属性，
//  */
// class ApprovalAttributes {
// 	constructor(ApprovalAttributeData) {
// 		this.element = h('div', {
// 			className: "approval-attributes",
// 			id: "approval-attribute-panel"
// 		});
// 		this.mask = h('div', 'mask');
// 		this.approvalEditorDrawer = h('div', 'approval-editor-drawer');
// 		this.element.appendChild(this.mask);
// 		this.element.appendChild(this.approvalEditorDrawer);

// 		this.element = h('div', {
// 			className: "approval-attributes",
// 			id: "approval-attribute-panel"
// 		}, [
// 			this.mask,
// 			h('div', 'approval-editor-drawer',
// 				h('div', 'approval-editor-content', [
// 					h('div', 'approval-editor-name-wrapper',
// 						h('div', 'approval-editor-name', '审批')
// 					),
// 					h('div', 'approval-editor-form', [
// 						//审批类型
// 					])
// 				])
// 			)
// 		])

// 	}

// 	close() {

// 	}
// }

// class ApprovalType {
// 	constructor(arg) {
// 		this.element = div('item-wrapper',
// 						div('approval-type-wrapper'
// 							div('item-key-wrapper', [
// 								span('item-key', '审批类型'),
// 								label('',
// 									input('checkbox', {
// 										value: '不计入审批效率统计'
// 									})
// 								)
// 							])
// 						)
// 					);
// 	}
// }


/**
 * 用户选择器
 */
class UserSelector {
	constructor(arg) {
		let addBtn = div('add-approver-btn', '+');
		addBtn.addEventListener("click", (e) => {
			let user = prompt("请输入审批人姓名");
			this.appendUserItem(user);

		})
		this.element = div('add-approver-wrapper', addBtn);
	}

	appendUserItem(name, src) {
		this.element.appendChild(new UserItem(name, src).getElement());
	}

	getElement() {
		return this.element;
	}
}

class UserItem {
	constructor(name, src) {
		name = name ? name : "张三";
		src = src ? src :
			"https://s3-imfile.feishucdn.com/static-resource/v1/v2_4cb935f7-a445-4c1f-a40c-ed52e7f0eb7g~?image_size=32x32&cut_type=&quality=&format=image&sticker_format=.webp";
		this.element = div('add-approver-item', [
			img({
				src: src
			}),
			div('', name),
			new CloseBtn(this).getElement()
		])
	}

	remove() {
		this.element.remove();
	}

	getElement() {
		return this.element;
	}
}

class CloseBtn {
	constructor(userItem) {
		this.userItem = userItem;
		this.element = div('close-btn', '×');
		this.element.addEventListener("click", (e) => {
			this.userItem.remove();
		})
	}

	getElement() {
		return this.element;
	}
}

/**
 * 单选按钮组
 */
class RadioGroup {
	constructor(group, options,event) {
		this.group = group;
		this.element = div('radio-line-group');
		for (var i = 0; i < options.length; i++) {
			let option = options[i];
			this.element.appendChild(this._buildItem(option.label, option.value,event));
		}
	}

	_buildItem(label, value,event) {
		let i = input('radio', {
			value: value,
			name: this.group,
			tabGroup:this.group,
			tabKey:value
		});
		let radio = h('label', '', [
			i,
			span('', label)
		]);
		i.addEventListener("click", (e) => {
			if(event){
				event(e);
			}
		})
		return radio;
	}

	getElement() {
		return this.element;
	}
}


/**
 * tab页签组件
 */
class Tab {
	constructor(items) {
		this.element = div('approval-function-btn-group')
		this.tabItems = [];
		for (var i = 0; i < items.length; i++) {
			let item = items[i]
			this.addItem(item, i == 0);
		}
	}

	addItem(item, active ,panel) {
		let tabItem = new TabItem(item, active);
		//订阅事件
		tabItem.subscription(this);
		this.element.appendChild(tabItem.getElement());
		this.tabItems.push(tabItem);
	}

	notify(eventSource) {
		//去除其他元素的class:active
		for (var i = 0; i < this.tabItems.length; i++) {
			let tabItem = this.tabItems[i]
			if (tabItem != eventSource) {
				tabItem.unActive();
			}
		}
	}

	getElement() {
		return this.element;
	}
}

class TabItem {
	constructor(name, active) {
		this.element = div('btn approval-function-btn ' + (active ? 'active' : ''), '设置审批人');
		this.subscribers = [];
		this.element.addEventListener("click", (e) => {
			for (var i = 0; i < this.subscribers.length; i++) {
				this.element.setAttribute("class", "btn approval-function-btn active");
				let subscriber = this.subscribers[i];
				subscriber.notify(this);
			}
		})
	}
	
	unActive(){
		this.element.setAttribute("class", "btn approval-function-btn");
	}

	subscription(subscriber) {
		this.subscribers.push(subscriber);
	}

	getElement() {
		return this.element;
	}
}
